<script setup lang="ts">
import {ref, watch} from 'vue'
import { useCategoryStore } from '@/store/modules/category';
import { storeToRefs } from 'pinia';
import { hasSpuAPI, skuList, removeSpu } from '@/network/product/spu';
import type { HasSpuResponseData, Records, SpuData, SkuInfoData, SkuData } from '@/network/product/spu/type';

import SkuForm from './skuForm.vue';
import SpuForm from './spuForm.vue';
import { ElMessage } from 'element-plus';
// 控制页面接口切换
const isShow = ref<number>(0)
// 当前页面
const pageNO = ref(1)
// 每一页展示数据条数
const limit = ref(3)
const {c1Id, c2Id ,c3Id} = storeToRefs(useCategoryStore())
// 已有spu数组
const records = ref<Records>([])
// 总条数
const total = ref<number>(0)
// 获取所有已有spu
async function getSpu(pager = 1) {
    pageNO.value = pager
    const res: HasSpuResponseData = await hasSpuAPI(pageNO.value, limit.value, c3Id.value)
    // console.log(res);
    if (res.code === 200) {
        records.value = res.data.records
        total.value = res.data.total
    }
}
// 监视三级分类Id变化
watch(c3Id, () => {
    // 没有三级分类Id，就不发请求
    if (!c3Id.value) return
    getSpu()
})

// 下拉切换每页几条函数
function sizeChange() {
    getSpu()
}
// 获取子组件实例spuform
const spu = ref<any>()
function addSpu() {
    isShow.value = 1
    spu.value.initAddSpu(c3Id.value)
}



// 取消spu添加与修改
function changeIsShow(obj: any) {
    isShow.value = 0
    console.log(obj);
    // 添加或修改成功，重新获取spu数据
    if (obj.params === 'update') {
        // 更新留在当前页
        getSpu(pageNO.value)
        console.log('留在当前页');
    } else if (obj.params === 'add') {
        // 添加留在第一页
        getSpu()
        console.log('留在第一页');
    }
    console.log('不走分支回到0-dom');
}

function updateSpu(row: SpuData) {
    isShow.value = 1
    // console.log(spu.value);
    // 调用子组件实例，获取完整已有的spu数据
    spu.value.initHasSpuData(row)
}
// 获取子组件实例skuform
const sku = ref<any>()
function addSku(row: SpuData) {
    isShow.value = 2
    // console.log(sku.value);
    // 调用子组件实例，初始化sku数据
    sku.value.initSkuData(row, c1Id.value, c2Id.value, )
}

// // 查看某一个已有的spu下全部售卖的商品sku
const skuArr = ref<SkuData[]>([])
async function findSku(row: SpuData) {
   const res: SkuInfoData = await skuList(row.id)
   console.log(res);
   if (res.code === 200) {
    skuArr.value = res.data
   }

//    控制对话框显示
   show.value = true
   
}

// 对话框
const show = ref<boolean>(false)

// 删除spu
async function deleteSpu(row: SpuData) {
    const res = await removeSpu(row.id)
    console.log(res);
    if (res.code === 200) {
        ElMessage({
            type: 'success',
            message: '删除成功'
        })
        // 获取剩余spu数据
        getSpu(records.value.length > 1 ? pageNO.value : pageNO.value - 1)
    } else {
        ElMessage({
            type: 'error',
            message: '删除失败'
        })
    }
}
</script>


<template>
    <div>
        <!-- 三级分类 -->
         <Category :isShow="isShow"></Category>
            <el-card style="margin: 10px 0;">
                <div v-show="isShow === 0">
                    <el-button v-has="'btn.Spu.add'" @click="addSpu" type="primary" icon="Plus" :disabled="!c3Id">添加SPU</el-button>
                    <el-table :data="records" border style="margin: 10px 0;">
                        <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                        <el-table-column prop="spuName" label="SPU名称"></el-table-column>
                        <el-table-column prop="description" label="SPU描述"></el-table-column>
                        <el-table-column label="SPU操作">
                            <template #="{row, $index}">
                                <el-button v-has="'btn.Spu.addsku'" @click="addSku(row)" type="primary" size="small" icon="Plus"></el-button>
                                <el-button v-has="'btn.Spu.update'" @click="updateSpu(row)" type="primary" size="small" icon="Edit"></el-button>
                                <el-button v-has="'btn.Spu.skus'" @click="findSku(row)" type="primary" size="small" icon="View"></el-button>
                                <el-popconfirm @confirm="deleteSpu(row)" :title="`确定要删除${row.spuName}吗？`" width="200px">
                                    <template #reference>
                                        <el-button v-has="'btn.Spu.delete'" type="danger" size="small" icon="Delete"></el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        v-model:current-page="pageNO"
                        v-model:page-size="limit"
                        :page-sizes="[3, 5, 7, 9]"
                        :background="true"
                        layout="prev, pager, next, jumper, ->, total, sizes,"
                        :total="total" @current-change="getSpu" @size-change="sizeChange" />
                </div>
                <!-- 添加与修改spu -->
                <SpuForm ref="spu" @changeIsShow="changeIsShow" v-show="isShow === 1" />
                <!-- 添加sku -->
                <SkuForm ref="sku" @changeIsShow="changeIsShow" v-show="isShow === 2" />
                <!-- dialog对话框: 展示已有的sku数据 -->
                 <el-dialog v-model="show" title="sku列表">
                    <el-table border :data="skuArr">
                        <el-table-column label="SKU名字" prop="skuName"></el-table-column>
                        <el-table-column label="SKU价格" prop="price"></el-table-column>
                        <el-table-column label="SKU重量" prop="weight"></el-table-column>
                        <el-table-column label="SKU图片">
                            <template #="{row, $index}">
                                <el-image :src="row.skuDefaultImg" style="width: 100px; height: 100px;"></el-image>
                            </template>
                        </el-table-column>
                    </el-table>
                 </el-dialog>
            </el-card>
    </div>
</template>


<style scoped lang='scss'>

</style>